<template>
    <div id="box">
        <!--导航条-->
        <div id="header">
            <Navbar>
                <span @click="back" slot="left" class="fa fa-chevron-left nav-size"></span>
                <span slot="center" class="nav-size">会员登录</span>
                <span slot="right" class="nav-size">
                    <router-link to="/regist">注册</router-link>
                </span>
            </Navbar>
        </div>
        <!--登录面板-->
        <div id="login-box">
            <div id="top">
                <img src="static/icons/account.png">
                <input type="text" placeholder="用户名" v-model="loginParams.name">
            </div>
            <div id="bottom">
                <img src="static/icons/psw.png">
                <input type="password"  v-model="loginParams.psw">
            </div>
        </div>
        <button@click="loginClick">登录</button>
        <div id="other-login">
            <Divider><span>使用第三方登录</span></Divider>
            <img src="static/icons/sina.png">
        </div>
        <img src="static/img/br_tu.png" id="img-bottom">
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';
import {Divider} from "vux";
export default {
    data:function(){
        return{
            loginParams:{}
        }
    },
    components:{
        Navbar,
        Divider
    },
    methods:{
        back(){
            history.back();
        },
        loginClick(){
            // console.log(this.loginParams)
            this.$store.dispatch("loginRequest",this.loginParams)
            .then(()=>{
                this.$router.push({path:"/"})
            })
        }
    }
}
</script>

<style lang='css' scoped>
    #box{
        width: 100vw;
        height: 100vh;
        background-image: url(../../static/img/bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    #header{
        height: 110px;
        width: 100vw;
        /*border: 1px solid black;*/
        background-color: #c7ddea;
    }
    .nav-size{
        font-size: 18px;
        color: #0894ec;
    }
    #img-bottom{
        position: absolute;
        left:0;
        bottom: 0;
        width: 100vw;
    }
    #login-box{
        /*border: 1px solid black;*/
        padding: 10px;
        background-color: #d6e6f0;
        
    }
    #login-box img{
        /*height: 50px;*/
        width: 26px;
    }
    #login-box input{
        border: 1px solid #cadce6;
        border-left: none;
        border-right: none;
        border-top: none;
        background-color: transparent;
        width: 75vw;
        height: 5vh;
    }
    #top{
        margin:10px;
    }
    #bottom{
        margin:5px;
    }
    button{
        background-color: #2997d9;
        width: 90vw;
        height: 40px;
        border: 1px solid #2997d9;
        border-radius: 12px;
        margin:10px;
        color: #fff;
        font-size: 15px
    }
    #other-login{
        text-align: center;
    }
    #other-login span{
        color: #98b6c7;
        font-size: 15px;
    }
    #other-login img{
        width: 50px;
        /*height: 50px;*/
        border-radius: 50%; 
    }
    a{
        text-decoration: none;
        color: #0894ec;
    }

</style>